<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>楼层滚动</title>
  </head>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    body,
    html {
      height: auto;
      width: 100%;
      background-image: linear-gradient(to right, #f7f0ac, #acf7f0, #f0acf7);
    }
    .nav-wrap {
      position: fixed;
      z-index: 99;
      top: 50%;
      left: 120px;
      transform: translateY(-50%);
      width: 100px;
      height: 300px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
    }
    .stick {
      position: sticky;
      top: 10px;
      height: 15px;
      padding: 5px;
      line-height: 15px;
      background-color: #5f9ea0;
      color: #ffff;
      font-weight: 900;
    }
    .nav {
      width: 100px;
      flex: 1;
      margin-bottom: 10px;
      background: url(https://img1.baidu.com/it/u=105002249,3897918256&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281)
        no-repeat center center/cover;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 25px;
    }
    .main {
      text-align: center;
      line-height: 900px;
      font-size: 30px;
      color: #ffff;
      width: 800px;
      height: 900px;
      /* background-color: hsla(0, 0%, 100%, 0.2); */
      background: rgba(255, 255, 255, 0.4);
      position: relative;
      left: 50%;
      transform: translateX(-50%);
    }
    .nav-active {
      color: red;
      background: url("https://img1.baidu.com/it/u=833204098,2930185410&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=745")
        no-repeat center center/cover;
    }
  </style>

  <body>
    <div class="nav-wrap">
      <div class="nav">A</div>
      <div class="nav">B</div>
      <div class="nav">C</div>
      <div class="nav">D</div>
    </div>

    <div class="main">A</div>

    <div class="main">
      <div class="stick">B</div>
    </div>

    <div class="main">
      <div class="stick">C</div>
    </div>

    <div class="main">
      <div class="stick">D</div>
    </div>
  </body>
  <script>
    const navAll = document.querySelector(".nav-wrap");
    const mainAll = document.querySelectorAll(".main");

    function reset() {
      for (let i = 0; i < navAll.children.length; i++) {
        navAll.children[i].classList.remove("nav-active");
      }
    }
    // 进入页面时，第一个导航栏高亮
    navAll.children[0].classList.add("nav-active");

    navAll.addEventListener("click", (event) => {
      if (event.target.classList.contains("nav")) {
        const index = Array.from(navAll.children).indexOf(event.target);
        console.log(index);
        window.scrollTo({
          top: Math.floor(mainAll[index].offsetTop),
          behavior: "smooth",
        });
      }
    });

    window.addEventListener("scroll", () => {
      const scrollTop = document.scrollingElement.scrollTop;
      let left = 0;
      let right = navAll.children.length - 1;

      while (left <= right) {
        const mid = Math.floor((left + right) / 2);
        const currentMain = mainAll[mid];

        if (
          currentMain.offsetTop <= scrollTop &&
          currentMain.offsetTop + currentMain.offsetHeight > scrollTop
        ) {
          reset();
          navAll.children[mid].classList.add("nav-active");
          break;
        } else if (currentMain.offsetTop > scrollTop) {
          right = mid - 1;
        } else {
          left = mid + 1;
        }
      }
    });
  </script>
</html>
